<template>
  <el-dialog
    class="pick-dialog"
    title="服务续费"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    append-to-body
    width="960px"
  >
    <div class="form-box">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="auto"
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item label="服务名称:" prop="accountType">
          <div>{{ruleForm.businessName}}</div>
        </el-form-item>
        <el-form-item label="续费时长:" prop="account">
          <div class="kuaijie flex ">
            <div
              class="kuaijie-item"
              :class="{ active: i === activeIndex }"
              v-for="(item, i) in monthList"
              @click="kuaijieClick(item,i)"
              :key="i"
            >
              <div class="money font16">{{item.month }}个月</div>
              <div class="jf font12">{{ item.pointsNum }}虞豆</div>
              <div class="xs"></div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="自动续费:" prop="isAuto">
          <el-switch
            v-model="ruleForm.isAuto"
            :active-value="1"
            :inactive-value="2"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="当前虞豆:" prop="applicantRealName">
         <div>{{userInfo.campNumber}}</div>
        </el-form-item>
      </el-form>
      <div class="center">
        <el-button @click="close('ruleForm')">取消</el-button>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          :loading="loading"
          >确认续费</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import moneyApi from "@/api/financeCenter/myMoney";
import valueAddedServices from '@/api/shanghuduan/valueAddedServices'
export default {
  name: "",
  components:{},
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      type:'',
      ruleForm: {},
      rules: {
        
      },
      from: "", //来源
      activeInfo:'',
      monthList:[],
      activeIndex:0
    };
  },
  created() {
    
  },
  methods: {
    open(item) {
      //console.log("%c Line:102 🍯 item", "color:#42b983", item);
      this.loading = false;
      this.ruleForm = {
        type: item.type,
        businessId: item.businessId,
        businessName: item.businessName,
        openMonth: "",
        isAuto: item.isAuto,
        autoMonth:item.autoMonth,
        activityId:'',
        cost:'',
        valueAddedServiceId:item.id
      };
      this.activitySettingsGetByType()
      this.dialogVisible = true;
    },

    // 获取活动信息
    activitySettingsGetByType(){
      let type = 2
      if(this.ruleForm.type==1){
        type = 2
      }
      if(this.ruleForm.type==2){
        type = 3
      }
      moneyApi.activitySettingsGetByType({
        type:type  //1表示虞豆充值 2表示增值服务配置的活动 包括竞价回收 3 接口平台
      }).then(res=>{
        if(res.code==200){
          // 将/n换成<br/>
          let data = res.data
          //console.log("%c Line:123 🥚 data", "color:#ed9ec7", data);
          this.des =  data.remark.replace(/\n/g, '<br/>')
          this.activeInfo = data
          
          if(type == 3){
            // 接口平台续费
           let config = JSON.parse(data.rule)
           config[this.ruleForm.businessId]
           this.monthList = config[this.ruleForm.businessId]?config[this.ruleForm.businessId].interfaceConfVoList:config[999999].interfaceConfVoList
           
          }else if(type == 2){
            // 增值功能续费
            this.monthList = JSON.parse(data.rule)
          }
          this.kuaijieClick(this.monthList[0],0)
          
        }
      })
    },
    //  选择快捷续费
    kuaijieClick(item, i) {
      this.activeIndex = i;
      this.ruleForm.openMonth = item.month;
      this.ruleForm.cost = item.pointsNum;
      this.ruleForm.activityId = this.activeInfo.id;
    },
    submitForm(){
      if(this.ruleForm.openMonth&&this.ruleForm.cost&&this.ruleForm.activityId){
        valueAddedServices.openValueAddedServices(this.ruleForm).then(res=>{
          this.$store.dispatch("getShopInfo")
            this.close()
            this.$alert(res.msg)
          })
      }
    },
    close(formName) {
      this.$emit('close')
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.kuaijie {
    flex-wrap: wrap;
  }
  .kuaijie-item {
    line-height: 22px;
    min-width: 200px;
    // width: 100%;
    // height: 49px;
    border-radius: 4px;
    border: 1px solid #24A813;
    text-align: center;
    color: #24A813;
    padding: 10px;
    margin-right: 30px;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    &.active {
      color: #fff;
      background-color: #24A813;
      .xs{
          width: 25px;
          height: 25px;
          background-image: url("https://imgage.maimaihao.com/yuduhulian/erp/static/img/huishou/checked.png");
          background-size: 100% 100%;
          position: absolute;
          top: 0;
          right: 0;
        }
    }
    
  }


</style>
